ant design动态增减表单项

2022-06-10 02:16| 来源: 网络整理| 查看: 265

有一种迷茫叫一脸懵逼，当明白真相时恍然大悟。

恍然大悟

在ant design的官网中有一个demo叫动态增减表单项，非常方便的使用在动态增加选项的功能，但是并没有提供设置默认值，而且在所有使用Form.List的demo中，也都没有。!_! 一脸懵逼的表示，怎么展现默认值啊。

官网的DEMO

demo的样例代码为

{(fields, { add, remove }) => { return ( {fields.map(field => ( { remove(field.name); }} /> ))} { add(); }} block > Add field ); }} Submit

展示的效果为 [图片上传失败...(image-16e9a7-1599629436569)]

设置默认值

在antd的4.x版本中，在form层级上使用initialValues来设置默认值。

添加了initialValues并为name为“users”的Form.List设置默认值。完整的代码为

{(fields, { add, remove }) => { return ( {fields.map(field => ( { remove(field.name); }} /> ))} { add(); }} block > Add field ); }} Submit

运行的默认效果为： [图片上传失败...(image-dc7270-1599629436569)]

不明白时千难万难，举步维艰。当看到真相的时候，一马平川，神清气爽！！！

// END 喜欢秋天的风，带着点点的果香

【本文地址】

今日新闻